<template>
  <view>
    <view class="flex relative flex-col gap-3">
      <!-- / :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"  -->
      <u-navbar
        back-text="返回"
        :is-back="false"
        height="60"
        :border-bottom="false"
        :background="{ backgroundColor: isScroll ? '#FFFFFF' : 'transparent' }"
      >
        <view class="grid grid-cols-3 items-center px-4 w-full">
          <view class="flex flex-col col-span-1" v-if="address">
            <view class="flex gap-1 items-center">
              <text class="text-[12px] text-[#171B24]">{{ location?.now?.text }}</text>
            </view>
            <!-- <view class="flex items-center" @click="vk.navigateTo('/pages/index/66?city=' + city)"> -->
            <view class="flex items-center" @click="openMapSelection">
              <text class="text-[12px] text-[#171B24] line-clamp-1">{{ address }}</text>
              <u-icon name="arrow-right" size="20" color="#919499"></u-icon>
            </view>
          </view>
          <view v-else class="flex flex-col col-span-1 text-[12px] text-[#171B24]">未获取到定位 </view>
          <div class="flex col-span-1 gap-2 justify-center items-center">
            <u-tabs
              v-if="isSticky"
              :list="list"
              height="75"
              v-model="current"
              active-color="#00A9AB"
              inactive-color="#919499"
              @change="switchCategories"
              bg-color="transparent"
            >
            </u-tabs>
          </div>
          <view class="flex col-span-1 justify-end">
            <view class="size-[20px]">
              <image src="/static/icon_share.png" class="size-full" mode="scaleToFill" />
            </view>
          </view>
        </view>
      </u-navbar>
      <view class="px-4">
        <u-swiper :list="basanList.banner" height="160" name="name"></u-swiper>
      </view>
      <view class="">
        <u-tabs :list="list" v-model="current" active-color="#00A9AB" inactive-color="#919499" @change="switchCategories" bg-color="#F4F6F8">
        </u-tabs>
      </view>
      <view class="sticky top-[60px] px-4 bg-[#F4F6F8] h-fit z-50" v-if="tags.length">
        <view class="flex justify-between items-center py-2">
          <scroll-view scroll-x class="whitespace-nowrap w-[90%]">
            <view class="flex gap-2 items-center">
              <view
                v-for="(tag, index) in tags"
                :key="index"
                class="flex items-center justify-center px-4 h-[24px] rounded-[18px]"
                :class="selectedTags.includes(tag.id) ? 'bg-[#00A9AB] text-white' : 'bg-[#FFFFFF] text-[#171B24]'"
                @click="toggleTag(index, tag)"
              >
                <text class="text-[11px] text-nowrap">{{ tag.name }}</text>
              </view>
            </view>
          </scroll-view>

          <view class="flex justify-end">
            <!--  -->
            <view class="size-[16px]" @click="jumpFiltering">
              <image src="/static/saixuan.png" class="size-full" mode="scaleToFill" />
            </view>
          </view>
        </view>
      </view>

      <yy-paging v-model="dataList" @query="queryList" usePageScroll ref="paging" :auto="automatic" :refresher-enabled="false">
        <!-- 列表 -->
        <!-- 列表 -->
        <!-- 列表 -->
        <view class="flex flex-col px-4">
          <view class="flex flex-col gap-2">
            <view v-for="(i, k) in dataList" :key="k" class="flex gap-2 bg-white p-3 rounded-[12px]" @click="jumpDetails(i)">
              <view class="w-[99px] h-[132px] rounded-[8px] flex-none relative overflow-hidden">
                <image :src="i.thumb" mode="scaleToFill" class="size-full" />

                <view class="size-full flex absolute inset-0 flex-col flex-grow justify-between p-1">
                  <view class="px-[4px] py-[3px] bg-[#00A9AB] rounded-[2px] flex justify-center items-center absolute">
                    <text class="text-[#FFFFFF] text-[10px] leading-none"> {{ i.basan_type == 1 ? '手杆' : '路亚' }}</text>
                  </view>
                  <view></view>
                  <view class="flex justify-between">
                    <view v-for="(i, k) in i.images.split('|').slice(0, 3)" :key="k" class="relative" :class="k > 0 ? '-ml-3' : ''">
                      <view
                        class="size-[24px] rounded-[5px] border-[1px] border-solid border-[#FFFFFF] bg-gray-400 relative z-[1] overflow-hidden"
                        :style="`z-index: ${3 - k};`"
                      >
                        <image :src="i" class="size-full" mode="scaleToFill" />
                      </view>
                    </view>
                    <view class="text-[14px] text-transparent ml-1">+{{ i.images.split('|').length }}</view>
                  </view>
                </view>
              </view>
              <view class="flex flex-col justify-between w-full">
                <view class="text-[15px] text-[#171B24] line-clamp-1">{{ i.name }}</view>
                <view class="text-[12px] text-[#919499] line-clamp-2"> {{ i.description }} </view>
                <view class="flex gap-1 items-center">
                  <view
                    v-for="(i, k) in i.ext.fish_species"
                    :key="k"
                    class="px-[6px] py-[3px] rounded-[4px] border-[1px] border-solid border-[#BFE8E9]"
                  >
                    <view class="text-[#00A9AB] text-[10px]"> {{ i.name }} </view>
                  </view>
                </view>
                <view class="flex items-center text-[12px] text-[#606368] gap-2">
                  <text>{{ i.weather.now.text }}</text>
                  <text class="w-[1px] h-[8px] border-[1px] border-solid border-[#C1C4C9]"></text>
                  <text>{{ i.weather.now.temp }}°C</text>
                  <text class="w-[1px] h-[8px] border-[1px] border-solid border-[#C1C4C9]"></text>
                  <text>{{ i.ext.district.name }}</text>
                </view>
                <view class="flex justify-between items-center">
                  <view class="flex gap-1 items-center">
                    <u-icon name="map-fill" color="#919499" size="22"></u-icon>
                    <text class="text-[11px] text-[#919499]">{{ i.location_name }}</text>
                  </view>
                  <view class="text-[11px] text-[#919499]"> 13.2km </view>
                </view>
              </view>
            </view>
            <view v-for="(i, k) in 10" :key="k"></view>
          </view>
        </view>
      </yy-paging>
    </view>
    <yy-tabbar :tabbarIndex="tabbarIndex"></yy-tabbar>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        tabbarIndex: 1,
        isScroll: false,
        isSticky: false,
        dataList: [],
        automatic: false,
        basanList: {},
        list: [
          {
            name: '手杆'
          },
          {
            name: '路亚'
          }
        ],
        current: 0,
        selectedTags: [], // 存储选中的标签索引
        tags: [], // 标签数据
        address: '',
        city: '',
        location: {}
      }
    },
    onPageScroll({ scrollTop }) {
      this.isScroll = scrollTop > 0
      this.isSticky = scrollTop > 170
    },
    onShow() {
      uni.hideTabBar()
      //获取当前位置
    },
    onLoad(options) {
      let that = this
      uni.getLocation({
        type: 'gcj02',
        geocode: true,
        success: function (res) {
          that.basanIndex(res.latitude, res.longitude)

          this.city = res.address.city
          that.address = res.address.poiName
        },
        fail: function (error) {
          that.basanIndex()
        }
      })
    },
    watch: {
      current(newValue, oldValue) {
        if (newValue === 1) {
          this.tags = this.basanList.fish_species_2
        } else {
          this.tags = this.basanList.fish_species_1
        }
      }
    },
    methods: {
      async openMapSelection() {
        let res = await vk.myfn.chooseLocation()
        console.log('🚀 ~ openMapSelection ~ res:', res)
        this.address = res.name
        this.city = res.city
        this.basanIndex(res.latitude, res.longitude)
      },
      jumpFiltering() {
        vk.navigateTo({
          url: '/pages/index/filtery',
          events: {
            update: data => {
              this.selectedTags = data.selectedTags
              this.$refs.paging.reload()
            }
          },
          success: res => {
            res.eventChannel.emit('data', this.tags)
          }
        })
      },
      jumpDetails(i) {
        vk.navigateTo({
          url: `/pages/index/details?id=${i.id}`,
          events: {
            update: data => {
              this.$refs.paging.reload()
            }
          }
        })
      },
      async basanIndex(latitude, longitude) {
        let res = await api.basanIndex({
          lat: latitude || '',
          lng: longitude || ''
        })
        console.log('🚀 ~ basanIndex ~ res:', res)
        this.basanList = res.data
        this.tags = res.data.fish_species_1
        this.location = res.data.location
        this.$refs.paging.reload()
      },

      switchCategories(e) {
        this.selectedTags = []
        this.current = e
        this.$refs.paging.reload()
      },

      async queryList(page, limit) {
        let params = {
          page,
          limit,
          basan_type: this.current + 1, //钓点类型:1=手竿,2=路亚
          fish_species_ids: this.selectedTags.join(',')
        }
        let res = await api.getBasanList(params)
        this.$refs.paging.complete(res.data)
      },

      // 处理标签选择
      toggleTag(index, tag) {
        const tagId = tag.id
        const tagIndex = this.selectedTags.indexOf(tagId)
        if (tagIndex > -1) {
          this.selectedTags.splice(tagIndex, 1)
        } else {
          this.selectedTags.push(tagId)
        }
        this.$refs.paging.reload()
      }
    }
  }
</script>

<style lang="scss" scoped>
  page {
    background-image: url('/static/img1HeadBackground0@3X.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: top !important;
    background-color: #f4f6f8 !important;

    // background-attachment: fixed !important;
  }
  .bgg {
    background-image: url('/static/imd_headBackground.png') !important;
    background-repeat: no-repeat !important;
    background-size: 100% !important;
    background-position: top !important;
  }
</style>
